<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>物业管理系统</title>
    <!-- 引用header的 HTML 代码片段 -->
    <div th:replace="~{fragments/header :: header}">...</div>
</head>
<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--左侧导航-->
        <!-- 引用menu的 HTML 代码片段 -->
        <div th:replace="~{fragments/menu :: menu}">...</div>
        <!--End 左侧导航-->
        <!--头部信息-->
        <!-- 引用nav的 HTML 代码片段 -->
        <div th:replace="~{fragments/nav :: nav}">...</div>
        <!--End 头部信息-->

        <!--页面主要内容-->
        <main class="lyear-layout-content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <!--style="background-color: #aadddd"-->
                            <div class="card-header"><h4>楼栋管理</h4></div>
                            <div class="card-toolbar clearfix">
                                <div class="toolbar-btn-action">
                                    <div class="col-xs-3">
                                        <input class="form-control" th:type="search" id="input-info" placeholder="输入楼栋名">
                                    </div>
                                    <button class="btn btn-primary" id="search"><i class="mdi mdi-magnify"></i> 搜索
                                    </button>
                                    <button class="btn btn-primary m-r-5" id="add"><i class="mdi mdi-plus"></i> 新增
                                    </button>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive" style="text-align: center;"
                                     th:if="${#lists.isEmpty(buildingsList)}">
                                    <h3>No Data</h3>
                                </div>
                                <div class="table-responsive" id="table" th:if="${not #lists.isEmpty(buildingsList)}">
                                    <table class="table table-bordered table-hover" style="text-align: center;">
                                        <thead>
                                        <tr>
                                            <th style="text-align: center">编号</th>
                                            <th style="text-align: center">楼栋名</th>
                                            <th style="text-align: center">类型</th>
                                            <th style="text-align: center">操作</th>
                                        </tr>
                                        </thead>
                                        <tbody id="tbody">
                                        <tr th:each="buildings,number :${buildingsList}">
                                            <td th:text="${number.index + 1}">1</td>
                                            <td th:text="${buildings.getName()}">A栋</td>
                                            <td th:text="${buildings.getType()}"><font class="text-success">电梯房</font>
                                            </td>
                                            <td style="width:200px;">
                                                <div class="btn-group">
                                                    <!--th:href="@{'/api/building/'+${buildings.getId()}}"-->
                                                    <button class="btn btn-xs btn-warning modify"
                                                            th:attr="data-id=${buildings.getId()},data-name=${buildings.getName()}"
                                                    ><i class="mdi mdi-pencil"></i>编辑
                                                    </button>
                                                    <button class="btn btn-xs btn-danger remove"
                                                            style="margin-left: 10px;"
                                                            th:attr="data-id=${buildings.getId()},data-name=${buildings.getName()}"
                                                    ><i class="mdi mdi-window-close"></i>删除
                                                    </button>
                                                </div>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="flex-row-between">
                                    <div>
                                        <ul class="pagination">
                                            <li id="first" th:attr="data-num=${pageInfo.pageNum}" ><a>«</a></li>
                                            <li><a th:text="${pageInfo.pageNum}" th:attr="data-num=${pageInfo.pageNum}" id="pageNum"></a></li>
                                            <li id="foot" th:attr="data-num=${pageInfo.pageNum}"><a>»</a></li>
                                            <li><a>共 : <span id="spa" th:text="${pageInfo.getPages()}" th:attr="data-num=${pageInfo.getPages()}"></span>页</a></li>
                                            <li><a>共 : <span id="dat" th:text="${pageInfo.getTotal()}"></span>条数据</a></li>
                                        </ul>
                                    </div>
                                    <div class="flex-row-between">
                                        <div class="margin-top-1-5">
                                            <input class="form-control" type="search" id="input-page" placeholder="输入所要跳转的页码">
                                        </div>
                                        <div class="margin-top-1-5">
                                            <button id="goto" class="btn btn-success m-r-5">跳转</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </main>
        <!--End 页面主要内容-->
    </div>
</div>

<!-- 引用footer的 HTML 代码片段 -->
<div th:replace="~{fragments/footer :: footer}">...</div>
<script type="text/javascript" th:inline="javascript">
    window.onload = function () {
        let pageNum = $("#pageNum").data("num");
        let pageNumend = $("#spa").data("num");
        //console.log(pageNum);
        //console.log(pageNumend)
        if (pageNum == 1){
            //console.log("disbales!");
            $("#first").addClass('disabled');
        }else if (pageNum == pageNumend){
            $("#foot").addClass('disabled');
        }
    }
    $(function () {
        <!--添加楼栋信息 -->
        $(document).on('click', '#add', function () {
            console.log("点击添加数据了~");
            $.confirm({
                title: '添加楼栋信息',
                content: '' +
                    '<form action="" class="formName">' +
                    '<div class="form-group">' +
                    '<label>请输入楼栋名称</label>' +
                    '<input type="text" placeholder="楼栋名称" class="name form-control" required />' +
                    '<label>请选择楼栋类型</label>' +
                    '<select class="form-control type" id="example-select" name="example-select" size="1" required>\n' +
                    '                        <option value="0">请选择</option>\n' +
                    '                        <option value="电梯房">电梯房</option>\n' +
                    '                        <option value="楼梯房">楼梯房</option>\n' +
                    '                      </select>' +
                    '</div>' +
                    '</form>',
                type: 'green',
                buttons: {
                    formSubmit: {
                        text: '提交',
                        btnClass: 'btn-green',
                        action: function () {
                            const name = this.$content.find('.name').val();
                            const type = this.$content.find('.type').val();
                            const info = {
                                name: name, type: type
                            };
                            if (!name) {
                                $.alert('请输入楼栋名称');
                                return false;
                            } else if (!type) {
                                $.alert('请输入楼栋类型');
                                return false;
                            }
                            console.log("点击提交");
                            $.ajax({
                                type: "POST",
                                dataType: "json",
                                url: "/api/building",
                                contentType: "application/json;charset=utf-8",
                                data: JSON.stringify(info),
                                success: function (data) {
                                    //console.log(data);
                                    let pageNum = 1;
                                    if (data == 1) {
                                        // 消息提示示例
                                        console.log("消息提示示例success");
                                        lightyear.loading('show');
                                        // 假设ajax提交操作
                                        setTimeout(function () {
                                            lightyear.loading('hide');
                                            lightyear.notify('添加成功~', 'success', 3000);
                                        }, 1e3)
                                        $.ajax({
                                            type: "GET",
                                            dataType: "json",
                                            url: "/api/paging/" + pageNum,
                                            contentType: "application/json;charset=utf-8",
                                            success: function (data) {
                                                //console.log(data);
                                                $("#table").html("");
                                                let datas = data.list;
                                                let pageNum = data.pageNum;
                                                let total = data.total;
                                                let info = '<table class="table table-bordered table-hover" style="text-align: center;">';
                                                info +=
                                                    '<thead>\n' +
                                                    ' <tr>\n' +
                                                    '   <th style="text-align: center">编号</th>\n' +
                                                    '   <th style="text-align: center">楼栋名</th>\n' +
                                                    '   <th style="text-align: center">类型</th>\n' +
                                                    '   <th style="text-align: center">操作</th>\n' +
                                                    ' </tr>\n' +
                                                    '</thead>\n' +
                                                    '<tbody id="tbody">';
                                                for (let bui in datas) {
                                                    let index = parseInt(bui) + 1;
                                                    info +=
                                                        '<tr>\n' +
                                                        '<td>' + index + '</td>\n' +
                                                        '<td>' + datas[bui].name + '</td>\n' +
                                                        '<td>' + datas[bui].type + '</td>\n' +
                                                        '<td style="width:200px;">\n' +
                                                        '<div class="btn-group">\n' +
                                                        '<button class="btn btn-xs btn-warning modify"\n' +
                                                        ' data-id="' + datas[bui].id + '" data-name="' + datas[bui].name + '"\n' +
                                                        '  ><i class="mdi mdi-pencil"></i>编辑\n' +
                                                        ' </button>\n' +
                                                        ' <button class="btn btn-xs btn-danger remove"\n' +
                                                        ' data-id="' + datas[bui].id + '" data-name="' + datas[bui].name + '"\n' +
                                                        ' style="margin-left: 10px;"\n' +
                                                        ' ><i class="mdi mdi-window-close"></i>删除\n' +
                                                        '</button>\n' +
                                                        ' </button>\n' +
                                                        '</div>\n' +
                                                        '</td>\n' +
                                                        '</tr>'
                                                }
                                                info += '</tbody>\n' +
                                                    '</table>'
                                                $("#table").html(info);
                                                $("#pageNum").html(pageNum);
                                                $("#pageNum").data('num',pageNum);
                                                $("#dat").html(total);
                                                $("#first").removeClass("disabled");
                                                $("#foot").removeClass("disabled");
                                                if (data.isFirstPage == true){
                                                    $("#first").addClass('disabled');
                                                }else if (data.isLastPage == true){
                                                    $("#foot").addClass('disabled');
                                                }
                                            }
                                        });
                                    } else {
                                        console.log("消息提示示例false");
                                        lightyear.loading('show');
                                        // 假设ajax提交操作
                                        setTimeout(function () {
                                            lightyear.loading('hide');
                                            lightyear.notify('服务器错误，请稍后再试~', 'danger', 100);
                                        }, 1e3)

                                    }
                                }
                            });
                        }
                    },
                    cancel: {
                        text: '取消'
                    },
                }
            });
        });
        <!-- 修改楼栋信息 -->
        $(document).on('click', ".modify", function () {
            console.log("点击修改数据了~");
            //let id = $(this).data('id');
            let id = $(this).attr("data-id");
            let name = $(this).attr('data-name');
            $.confirm({
                title: '修改楼栋信息',
                content: '' +
                    '<form action="" class="formName">' +
                    '<div class="form-group">' +
                    '<label>请输入楼栋名称</label>' +
                    '<input type="text" value="' + name + '" class="name form-control" required />' +
                    '<label>请选择楼栋类型</label>' +
                    '<select class="form-control type" id="example-select" name="example-select" size="1" required>\n' +
                    '  <option value="0">请选择</option>\n' +
                    '  <option value="电梯房">电梯房</option>\n' +
                    '  <option value="楼梯房">楼梯房</option>\n' +
                    '</select>' +
                    '</div>' +
                    '</form>',
                type: 'orange',
                buttons: {
                    formSubmit: {
                        text: '提交',
                        btnClass: 'btn-orange',
                        action: function () {
                            let name = this.$content.find('.name').val();
                            let type = this.$content.find('.type').val();
                            let info = {
                                name: name, type: type
                            };
                            if (!name) {
                                $.alert('请输入楼栋名称');
                                return false;
                            } else if (!type) {
                                $.alert('请输入楼栋类型');
                                return false;
                            }
                            console.log("点击提交");
                            $.ajax({
                                type: "PUT",
                                url: "/api/buildingById/" + id,
                                dataType: 'json',
                                contentType: "application/json;charset=utf-8",
                                data: JSON.stringify(info),
                                success: function (data) {
                                    //console.log(data);
                                    let pageNum = 1;
                                    if (data == 1) {
                                        // 消息提示示例
                                        console.log("消息提示示例success");
                                        lightyear.loading('show');
                                        // 假设ajax提交操作
                                        setTimeout(function () {
                                            lightyear.loading('hide');
                                            lightyear.notify('修改成功~', 'success', 3000);
                                        }, 1e3)

                                        $.ajax({
                                            type: "GET",
                                            dataType: "json",
                                            url: "/api/paging/" + pageNum,
                                            contentType: "application/json;charset=utf-8",
                                            success: function (data) {
                                                //console.log(data);
                                                let datas = data.list;
                                                let total = data.total;
                                                let pageNum = data.pageNum;
                                                $("#table").html("");
                                                let info = '<table class="table table-bordered table-hover" style="text-align: center;">';
                                                info +=
                                                    '<thead>\n' +
                                                    ' <tr>\n' +
                                                    '   <th style="text-align: center">编号</th>\n' +
                                                    '   <th style="text-align: center">楼栋名</th>\n' +
                                                    '   <th style="text-align: center">类型</th>\n' +
                                                    '   <th style="text-align: center">操作</th>\n' +
                                                    ' </tr>\n' +
                                                    '</thead>\n' +
                                                    '<tbody id="tbody">';
                                                for (let bui in datas) {
                                                    let index = parseInt(bui) + 1;
                                                    info +=
                                                        '<tr>\n' +
                                                        '<td>' + index + '</td>\n' +
                                                        '<td>' + datas[bui].name + '</td>\n' +
                                                        '<td>' + datas[bui].type + '</td>\n' +
                                                        '<td style="width:200px;">\n' +
                                                        '<div class="btn-group">\n' +
                                                        '<button class="btn btn-xs btn-warning modify"\n' +
                                                        ' data-id="' + datas[bui].id + '" data-name="' + datas[bui].name + '"\n' +
                                                        ' ><i class="mdi mdi-pencil"></i>编辑\n' +
                                                        '</button>\n' +
                                                        ' <button class="btn btn-xs btn-danger remove" style="margin-left: 10px;"\n' +
                                                        ' data-id="' + datas[bui].id + '" data-name="' + datas[bui].name + '"\n' +
                                                        '><i class="mdi mdi-window-close"></i>删除\n' +
                                                        ' </button>\n' +
                                                        '</div>\n' +
                                                        '</td>\n' +
                                                        '</tr>'
                                                }
                                                info += '</tbody>\n' +
                                                    '</table>'
                                                $("#table").html(info);
                                                $("#pageNum").html(pageNum);
                                                $("#pageNum").data('num',pageNum);
                                                $("#dat").html(total);
                                                $("#first").removeClass("disabled");
                                                $("#foot").removeClass("disabled");
                                                if (data.isFirstPage == true){
                                                    $("#first").addClass('disabled');
                                                }else if (data.isLastPage == true){
                                                    $("#foot").addClass('disabled');
                                                }
                                            }
                                        });
                                    } else {
                                        console.log("消息提示示例false");
                                        lightyear.loading('show');
                                        // 假设ajax提交操作
                                        setTimeout(function () {
                                            lightyear.loading('hide');
                                            lightyear.notify('服务器错误，请稍后再试~', 'danger', 100);
                                        }, 1e3)

                                    }
                                }
                            });
                        }
                    },
                    cancel: {
                        text: '取消'
                    },
                }

            });
        });
        <!-- 删除楼栋信息 -->
        $(document).on('click', ".remove", function () {
            console.log("点击删除数据了~");
            let id = $(this).data('id');
            let name = $(this).data('name');
            $.confirm({
                title: '删除信息提示',
                content: '确定要删除' + name + '吗？',
                type: 'red',
                typeAnimated: true,
                buttons: {
                    tryAgain: {
                        text: '确定',
                        btnClass: 'btn-red',
                        action: function () {
                            console.log("确定删除数据了~");
                            let uri = "/api/buildingById";
                            $.ajax({
                                url: uri + "/" + id,
                                type: "DELETE",
                                success: function (data) {
                                    console.log(data);
                                    let pageNum = 1;
                                    if (data == 1) {
                                        // 消息提示示例
                                        console.log("消息提示示例success");
                                        lightyear.loading('show');
                                        // 假设ajax提交操作
                                        setTimeout(function () {
                                            lightyear.loading('hide');
                                            lightyear.notify('删除成功~', 'success', 3000);
                                        }, 1e3)
                                        $.ajax({
                                            type: "GET",
                                            dataType: "json",
                                            url: "/api/paging/" + pageNum,
                                            contentType: "application/json;charset=utf-8",
                                            success: function (data) {
                                                //console.log(data);
                                                $("#table").html("");
                                                let datas = data.list;
                                                let total = data.total;
                                                let pageNum = data.pageNum;
                                                let info = '<table class="table table-bordered table-hover" style="text-align: center;">';
                                                info +=
                                                    '<thead>\n' +
                                                    ' <tr>\n' +
                                                    '   <th style="text-align: center">编号</th>\n' +
                                                    '   <th style="text-align: center">楼栋名</th>\n' +
                                                    '   <th style="text-align: center">类型</th>\n' +
                                                    '   <th style="text-align: center">操作</th>\n' +
                                                    ' </tr>\n' +
                                                    '</thead>\n' +
                                                    '<tbody id="tbody">';
                                                for (let bui in datas) {
                                                    let index = parseInt(bui) + 1;
                                                    info +=
                                                        '<tr>\n' +
                                                        '<td>' + index + '</td>\n' +
                                                        '<td>' + datas[bui].name + '</td>\n' +
                                                        '<td>' + datas[bui].type + '</td>\n' +
                                                        '<td style="width:200px;">\n' +
                                                        '<div class="btn-group">\n' +
                                                        '<button class="btn btn-xs btn-warning modify"\n' +
                                                        ' data-id="' + datas[bui].id + '" data-name="' + datas[bui].name + '"\n' +
                                                        ' ><i class="mdi mdi-pencil"></i>编辑\n' +
                                                        '</button>\n' +
                                                        ' <button class="btn btn-xs btn-danger remove" style="margin-left: 10px;"\n' +
                                                        ' data-id="' + datas[bui].id + '" data-name="' + datas[bui].name + '"\n' +
                                                        '><i class="mdi mdi-window-close"></i>删除\n' +
                                                        ' </button>\n' +
                                                        '</div>\n' +
                                                        '</td>\n' +
                                                        '</tr>'
                                                }
                                                info += '</tbody>\n' +
                                                    '</table>'
                                                $("#table").html(info);
                                                $("#pageNum").html(pageNum);
                                                $("#pageNum").data('num',pageNum);
                                                $("#dat").html(total);
                                                $("#first").removeClass("disabled");
                                                $("#foot").removeClass("disabled");
                                                if (data.isFirstPage == true){
                                                    $("#first").addClass('disabled');
                                                }else if (data.isLastPage == true){
                                                    $("#foot").addClass('disabled');
                                                }
                                            }
                                        });
                                    } else {
                                        console.log("消息提示示例false");
                                        lightyear.loading('show');
                                        // 假设ajax提交操作
                                        setTimeout(function () {
                                            lightyear.loading('hide');
                                            lightyear.notify('服务器错误，请稍后再试~', 'danger', 100);
                                        }, 1e3)

                                    }
                                }

                            });
                        }
                    },
                    close: {
                        text: '取消',
                        action: function () {
                            console.log("取消删除数据了~");
                        }
                    }
                }
            });
        });
        <!-- 搜索楼栋信息 -->
        $(document).on('click', "#search", function () {
            console.log("点击搜索数据了~");
            let name = $("#input-info").val();
            console.log(name);
            if (name.length > 0) {
                $.ajax({
                    type: "GET",
                    dataType: "json",
                    url: "/api/building/" + name,
                    contentType: "application/json;charset=utf-8",
                    success: function (data) {
                        //console.log(data);
                        $("#table").html("");
                        let datas = data.list;
                        let pages = data.pages;
                        let total = data.total;
                        let pageNum = data.pageNum;
                        let info = '<table class="table table-bordered table-hover" style="text-align: center;">';
                        info +=
                            '<thead>\n' +
                            ' <tr>\n' +
                            '   <th style="text-align: center">编号</th>\n' +
                            '   <th style="text-align: center">楼栋名</th>\n' +
                            '   <th style="text-align: center">类型</th>\n' +
                            '   <th style="text-align: center">操作</th>\n' +
                            ' </tr>\n' +
                            '</thead>\n' +
                            '<tbody id="tbody">';
                        for (let bui in datas) {
                            let index = parseInt(bui) + 1;
                            info +=
                                '<tr>\n' +
                                '<td>' + index + '</td>\n' +
                                '<td>' + datas[bui].name + '</td>\n' +
                                '<td>' + datas[bui].type + '</td>\n' +
                                '<td style="width:200px;">\n' +
                                '<div class="btn-group">\n' +
                                '<button class="btn btn-xs btn-warning modify"\n' +
                                ' data-id="' + datas[bui].id + '" data-name="' + datas[bui].name + '"\n' +
                                ' ><i class="mdi mdi-pencil"></i>编辑\n' +
                                '</button>\n' +
                                ' <button class="btn btn-xs btn-danger remove" style="margin-left: 10px;"\n' +
                                ' data-id="' + datas[bui].id + '" data-name="' + datas[bui].name + '"\n' +
                                '><i class="mdi mdi-window-close"></i>删除\n' +
                                ' </button>\n' +
                                '</div>\n' +
                                '</td>\n' +
                                '</tr>'
                        }
                        info += '</tbody>\n' +
                            '</table>'
                        $("#table").html(info);
                        $("#pageNum").html(pageNum);
                        $("#pageNum").data('num',pageNum);
                        $("#spa").html(pages);
                        $("#dat").html(total);
                        $("#first").removeClass("disabled");
                        $("#foot").removeClass("disabled");
                        if (data.isFirstPage == true){
                            $("#first").addClass('disabled');
                        }else if (data.isLastPage == true){
                            $("#foot").addClass('disabled');
                        }
                    }
                });
            } else {
                console.log("value 为空");
                let name = "notFull";
                $.ajax({
                    type: "GET",
                    dataType: "json",
                    url: "/api/building/" + name,
                    contentType: "application/json;charset=utf-8",
                    success: function (data) {
                        //console.log(data);
                        $("#table").html("");
                        let datas = data.list;
                        let pages = data.pages;
                        let total = data.total;
                        let pageNum = data.pageNum;
                        let info = '<table class="table table-bordered table-hover" style="text-align: center;">';
                        info +=
                            '<thead>\n' +
                            ' <tr>\n' +
                            '   <th style="text-align: center">编号</th>\n' +
                            '   <th style="text-align: center">楼栋名</th>\n' +
                            '   <th style="text-align: center">类型</th>\n' +
                            '   <th style="text-align: center">操作</th>\n' +
                            ' </tr>\n' +
                            '</thead>\n' +
                            '<tbody id="tbody">';
                        for (let bui in datas) {
                            let index = parseInt(bui) + 1;
                            info +=
                                '<tr>\n' +
                                '<td>' + index + '</td>\n' +
                                '<td>' + datas[bui].name + '</td>\n' +
                                '<td>' + datas[bui].type + '</td>\n' +
                                '<td style="width:200px;">\n' +
                                '<div class="btn-group">\n' +
                                '<button class="btn btn-xs btn-warning modify"\n' +
                                ' data-id="' + datas[bui].id + '" data-name="' + datas[bui].name + '"\n' +
                                ' ><i class="mdi mdi-pencil"></i>编辑\n' +
                                '</button>\n' +
                                ' <button class="btn btn-xs btn-danger remove" style="margin-left: 10px;"\n' +
                                ' data-id="' + datas[bui].id + '" data-name="' + datas[bui].name + '"\n' +
                                '><i class="mdi mdi-window-close"></i>删除\n' +
                                ' </button>\n' +
                                '</div>\n' +
                                '</td>\n' +
                                '</tr>'
                        }
                        info += '</tbody>\n' +
                            '</table>'
                        $("#table").html(info);
                        $("#pageNum").html(pageNum);
                        $("#pageNum").data('num',pageNum);
                        $("#spa").html(pages);
                        $("#dat").html(total);
                        $("#first").removeClass("disabled");
                        $("#foot").removeClass("disabled");
                        if (data.isFirstPage == true){
                            $("#first").addClass('disabled');
                        }else if (data.isLastPage == true){
                            $("#foot").addClass('disabled');
                        }
                    }
                });
            }

        });
        <!-- 分页信息(上一页) -->
        $(document).on('click', "#first", function (){
            console.log("分页(上一页)......");
            let pageNum = $("#pageNum").data("num")-1;
            //console.log(pageNum);
            $.ajax({
                type: "GET",
                dataType: "json",
                url: "/api/paging/" + pageNum,
                contentType: "application/json;charset=utf-8",
                success: function (data) {
                    //console.log(data);
                    $("#table").html("");
                    let datas = data.list;
                    let pageNum = data.pageNum;
                    let serial = ((data.pageNum)-1)*5;
                    let info = '<table class="table table-bordered table-hover" style="text-align: center;">';
                    info +=
                        '<thead>\n' +
                        ' <tr>\n' +
                        '   <th style="text-align: center">编号</th>\n' +
                        '   <th style="text-align: center">楼栋名</th>\n' +
                        '   <th style="text-align: center">类型</th>\n' +
                        '   <th style="text-align: center">操作</th>\n' +
                        ' </tr>\n' +
                        '</thead>\n' +
                        '<tbody id="tbody">';
                    for (let bui in datas) {
                        let index = parseInt(bui) + 1 +serial;
                        info +=
                            '<tr>\n' +
                            '<td>' + index + '</td>\n' +
                            '<td>' + datas[bui].name + '</td>\n' +
                            '<td>' + datas[bui].type + '</td>\n' +
                            '<td style="width:200px;">\n' +
                            '<div class="btn-group">\n' +
                            '<button class="btn btn-xs btn-warning modify"\n' +
                            ' data-id="' + datas[bui].id + '" data-name="' + datas[bui].name + '"\n' +
                            ' ><i class="mdi mdi-pencil"></i>编辑\n' +
                            '</button>\n' +
                            ' <button class="btn btn-xs btn-danger remove" style="margin-left: 10px;"\n' +
                            ' data-id="' + datas[bui].id + '" data-name="' + datas[bui].name + '"\n' +
                            '><i class="mdi mdi-window-close"></i>删除\n' +
                            ' </button>\n' +
                            '</div>\n' +
                            '</td>\n' +
                            '</tr>'
                    }
                    info += '</tbody>\n' +
                        '</table>'
                    $("#table").html(info);
                    $("#pageNum").html(pageNum);
                    $("#pageNum").data('num',pageNum);
                    $("#first").removeClass("disabled");
                    $("#foot").removeClass("disabled");
                    if (data.isFirstPage == true){
                        //console.log(data.isLastPage);
                        $("#first").addClass('disabled');
                    }
                }
            });
        });
        <!-- 分页信息(下一页) -->
        $(document).on('click', "#foot", function (){
            console.log("分页(下一页)......");
            let pageNum = $("#pageNum").data("num") + 1;
            //console.log(pageNum);
            $.ajax({
                type: "GET",
                dataType: "json",
                url: "/api/paging/" + pageNum,
                contentType: "application/json;charset=utf-8",
                success: function (data) {
                    //console.log(data);
                    $("#table").html("");
                    let datas = data.list;
                    let pageNum = data.pageNum;
                    let serial = ((data.pageNum)-1)*5;
                    let info = '<table class="table table-bordered table-hover" style="text-align: center;">';
                    info +=
                        '<thead>\n' +
                        ' <tr>\n' +
                        '   <th style="text-align: center">编号</th>\n' +
                        '   <th style="text-align: center">楼栋名</th>\n' +
                        '   <th style="text-align: center">类型</th>\n' +
                        '   <th style="text-align: center">操作</th>\n' +
                        ' </tr>\n' +
                        '</thead>\n' +
                        '<tbody id="tbody">';
                    for (let bui in datas) {
                        let index = parseInt(bui) + 1 + serial;
                        info +=
                            '<tr>\n' +
                            '<td>' + index + '</td>\n' +
                            '<td>' + datas[bui].name + '</td>\n' +
                            '<td>' + datas[bui].type + '</td>\n' +
                            '<td style="width:200px;">\n' +
                            '<div class="btn-group">\n' +
                            '<button class="btn btn-xs btn-warning modify"\n' +
                            ' data-id="' + datas[bui].id + '" data-name="' + datas[bui].name + '"\n' +
                            ' ><i class="mdi mdi-pencil"></i>编辑\n' +
                            '</button>\n' +
                            ' <button class="btn btn-xs btn-danger remove" style="margin-left: 10px;"\n' +
                            ' data-id="' + datas[bui].id + '" data-name="' + datas[bui].name + '"\n' +
                            '><i class="mdi mdi-window-close"></i>删除\n' +
                            ' </button>\n' +
                            '</div>\n' +
                            '</td>\n' +
                            '</tr>'
                    }
                    info += '</tbody>\n' +
                        '</table>'
                    $("#table").html(info);
                    $("#pageNum").html(pageNum);
                    $("#pageNum").data('num',pageNum);
                    $("#first").removeClass("disabled");
                    $("#foot").removeClass("disabled");
                    if (data.isLastPage == true){
                        //console.log(data.isLastPage);
                        $("#foot").addClass('disabled');
                    }
                }
            });
        });
        <!-- 分页信息(跳转页码) -->
        $(document).on('click', "#goto", function (){
            console.log("分页(跳转页码)......");
            let pageNum = $("#input-page").val();
            console.log(pageNum);
            $.ajax({
                type: "GET",
                dataType: "json",
                url: "/api/paging/" + pageNum,
                contentType: "application/json;charset=utf-8",
                success: function (data) {
                    //console.log(data);
                    $("#table").html("");
                    let datas = data.list;
                    let pageNum = data.pageNum;
                    let serial = ((data.pageNum)-1)*5;
                    let info = '<table class="table table-bordered table-hover" style="text-align: center;">';
                    info +=
                        '<thead>\n' +
                        ' <tr>\n' +
                        '   <th style="text-align: center">编号</th>\n' +
                        '   <th style="text-align: center">楼栋名</th>\n' +
                        '   <th style="text-align: center">类型</th>\n' +
                        '   <th style="text-align: center">操作</th>\n' +
                        ' </tr>\n' +
                        '</thead>\n' +
                        '<tbody id="tbody">';
                    for (let bui in datas) {
                        let index = parseInt(bui) + 1 + serial;
                        info +=
                            '<tr>\n' +
                            '<td>' + index + '</td>\n' +
                            '<td>' + datas[bui].name + '</td>\n' +
                            '<td>' + datas[bui].type + '</td>\n' +
                            '<td style="width:200px;">\n' +
                            '<div class="btn-group">\n' +
                            '<button class="btn btn-xs btn-warning modify"\n' +
                            ' data-id="' + datas[bui].id + '" data-name="' + datas[bui].name + '"\n' +
                            ' ><i class="mdi mdi-pencil"></i>编辑\n' +
                            '</button>\n' +
                            ' <button class="btn btn-xs btn-danger remove" style="margin-left: 10px;"\n' +
                            ' data-id="' + datas[bui].id + '" data-name="' + datas[bui].name + '"\n' +
                            '><i class="mdi mdi-window-close"></i>删除\n' +
                            ' </button>\n' +
                            '</div>\n' +
                            '</td>\n' +
                            '</tr>'
                    }
                    info += '</tbody>\n' +
                        '</table>'
                    $("#table").html(info);
                    $("#pageNum").html(pageNum);
                    $("#pageNum").data('num',pageNum);
                    $("#first").removeClass("disabled");
                    $("#foot").removeClass("disabled");
                    if (data.isFirstPage == true){
                        $("#first").addClass('disabled');
                    }else if (data.isLastPage == true){
                        $("#foot").addClass('disabled');
                    }
                }
            });
        });
    })
</script>
</body>
</html>